```jsx
import * as carousel from "@zag-js/carousel"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

const items = [
  "https://tinyurl.com/5b6ka8jd",
  "https://tinyurl.com/7rmccdn5",
  "https://tinyurl.com/59jxz9uu",
]

export function Carousel() {
  const service = useMachine(carousel.machine, {
    id: createUniqueId(),
    slideCount: items.length,
  })

  const api = createMemo(() => carousel.connect(service, normalizeProps))

  return (
    <main class="carousel">
      <div {...api().getRootProps()}>
        <div {...api().getControlProps()}>
          <button {...api().getPrevTriggerProps()}>Prev</button>
          <button {...api().getNextTriggerProps()}>Next</button>
        </div>

        <div {...api().getItemGroupProps()}>
          <Index each={items}>
            {(image, index) => (
              <div {...api().getItemProps({ index })}>
                <img src={image()} alt="" />
              </div>
            )}
          </Index>
        </div>

        <div {...api().getIndicatorGroupProps()}>
          <Index each={api().pageSnapPoints}>
            {(_, index) => <button {...api().getIndicatorProps({ index })} />}
          </Index>
        </div>
      </div>
    </main>
  )
}
```
